<template>
	<div style="width: 75%;">
		<div class="ffffff mainpadding radius">
			<div class="flexbetween">
				<div class="flexleft" v-if="dataAll.info.teacher_id">
					<!-- <img class="userImg margin_right1" src="../../static/image/course.png" alt=""> -->
					<div class="text_b color_three">{{dataAll.info.teacher.username}}</div>
				</div>
				<div class="text_b color_nine">{{dataAll.info.replytime_text}}</div>
			</div>
			<div class="margin_top2 text_d color_three">{{dataAll.info.reply_content}}</div>
			<!-- <div class="margin_top2">
				<img class="videoBox" src="../../static/image/course.png" alt="">
			</div> -->
			<template v-if="dataAll.info.reply_video_text">
				<video class="videoBox margin_top2" style="width: 500px;height: 300px;" controls :src="dataAll.info.reply_video_text" ></video>
			</template>
		</div>
		<!-- 没有评价的时候展示 -->
		<div class="ffffff mainpadding radius margin_top" v-if="!dataAll.comment">
			<div class="text_ft color_three">评价</div>
			<div class="flexleft margin_top">
				<div class="text_b color_three margin_right6 white_nowrap">回答评价</div>
				<div class="flexleft">
					<div class="flexleft margin_right6 pointer" @click="pjtype=5">
						<div class="margin_right1"  :class="pjtype==5?'face1_active':'face1'"></div>
						<div class="text_b" :class="pjtype==5?'color_theme':'color_nine'">好评</div>
					</div>
					<div class="flexleft margin_right6  pointer" @click="pjtype=3">
						<div class="face2 margin_right1"   :class="pjtype==3?'face2_active':'face2'"></div>
						<div class="text_b"  :class="pjtype==3?'color_theme':'color_nine'">中评</div>
					</div>
					<div class="flexleft pointer" @click="pjtype=1">
						<div class="margin_right1" :class="pjtype==1?'face3_active':'face3'"></div>
						<div class="text_b" :class="pjtype==1?'color_theme':'color_nine'">差评</div>
					</div>
				</div>
			</div>
			<div class="margin_top">
				<div class="flex">
					<div class="text_b color_three white_nowrap margin_right6">评价内容</div>
					<div class="flex1">
						<el-input type="textarea" :autosize="{ minRows: 4, maxRows: 4}" resize="none"  
						show-word-limit maxlength="50" placeholder="请输入内容" v-model="content">
						</el-input>
						<div class="flexright margin_top2">
							<div class="themeBtnBg" @click="submit">发布</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 我的评价 -->
		<div class="ffffff mainpadding radius margin_top"  v-if="dataAll.comment">
			<div class="flexbetween">
				<div class="text_ft color_three">我的评价</div>
				<div class="flexleft" v-if="dataAll.comment.composite_evaluate==5">
					<div class="face1_active margin_right1"></div>
					<div class="text_b color_theme">好评</div>
				</div>
				<div class="flexleft" v-if="dataAll.comment.composite_evaluate==3">
					<div class="face2_active margin_right1"></div>
					<div class="text_b color_theme">中评</div>
				</div>
				<div class="flexleft" v-if="dataAll.comment.composite_evaluate==1">
					<div class="face3_active margin_right1"></div>
					<div class="text_b color_theme">差评</div>
				</div>
			</div>
			<div class="margin_top2 text_d color_three">{{dataAll.comment.content}}</div>
			<div class="text_b color_nine margin_top1">{{dataAll.comment.createtime_text}}</div>
			<div class="margin_top2 teacherReply" v-if="dataAll.comment.reply_content">
				<div class="text_b color_three">老师回复：</div>
				<div class="text_d color_three margin_top1">{{dataAll.comment.reply_content}}</div>
				<!-- <div class="text_b color_nine margin_top1">2023-08-16 16:20:20</div> -->
			</div>
		</div>
	</div>
</template>

<script>
	import {
		teacher_comment,getquestiondetail
	} from "@/API/question"
	export default{
		data(){
			return{
				dataAll:{},
				pjtype:5,
				content:""
			}
		},
		created() {
			this.getDetail()
		},
		methods: {
			submit() {
				if (this.content == "") {
					this.$message.warning("请输入评价内容")
					return false
				}
				let data = {
					teacher_question_id: this.$route.query.id,
					composite_evaluate: this.pjtype,
					content: this.content
				}
				teacher_comment(data).then(res => {
					if (res.data.code == 1) {
						this.$message.warning(res.data.msg)
						this.getDetail()
					}else{
						this.$message.error(res.data.msg)
					}
				})
			},
			getDetail() {
				getquestiondetail({
					teacher_question_id:this.$route.query.id
				}).then(res => {
					this.dataAll = res.data.data
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.userImg{
		width: 24px;
		min-width: 24px;
		height: 24px;
		border-radius: 50%;
	}
	.videoBox{
		width: 143px;
		min-width: 143px;
		height: 80px;
	}
	.themeBtnBg{
		padding: 5px 15px;
		background-color: #3478F5;
		border-radius: 4px;
		font-size: 12px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #ffffff;
	}
	.teacherReply{
		background: #F4F4F4;
		padding: 20px;
	}
</style>